<script setup lang="ts">
  import { ref, defineEmits, computed, watch, onMounted, nextTick } from 'vue';
  import { useBooleanStore } from '@/store';
  import { Notification } from '@arco-design/web-vue';

  import {
    searchChangedAo,
    taskOut,
    searchToolMaterial,
  } from '@/api/sorting-matching';

  const emit = defineEmits(['updateArray']);
  const booleanStore = useBooleanStore();
  const hStyle = ref({
    'background-color': booleanStore.color,
    'border-radius': booleanStore.borderRadius,
  });
  const pageSize = ref<number>(30);
  const pageNumber = ref<number>(1);

  // 发送搜索数据
  const flowQueryData = ref({
    searchParams: {},
    pageParameter: computed(() => ({
      rows: pageSize.value,
      page: pageNumber.value,
    })),
  });
  // 表格数据

  async function handleSearch() {
    const newData = await searchChangedAo(flowQueryData.value);
    emit('updateArray', newData);
  }

  // 监听分页
  watch([() => booleanStore.pageNum, () => booleanStore.pageSize], () => {
    if (booleanStore.num5 === 51) {
      pageNumber.value = booleanStore.pageNum;
      pageSize.value = booleanStore.pageSize;
      handleSearch();
    }
  });

  // 扫码框对象
  const scanInput = ref<any>('');
  // 扫码内容
  const scanCode = ref<string>('');
  // 在特殊时间禁用扫码
  const disabled = ref<boolean>(false);
  // 缓存箱条码
  const workBinCode = ref<string>('');
  // 工作包条码
  const toolCode = ref<string>('');
  // 获取table勾选的数据
  const selected = ref<any[]>([]);
  watch(
    () => booleanStore.list,
    () => {
      if (booleanStore.num7 === 13) {
        selected.value = booleanStore.list[0].value;
        console.log(selected.value);
      }
    }
  );
  // 工作包出库
  async function gzbComeBtn() {
    if (selected.value.length !== 1) {
      Notification.error({
        title: '错误',
        content: '请您选择一条数据',
        closable: true,
      });
      return;
    }

    const msPackageId = selected.value[0].msTaskPackageId;
    const data = await taskOut({
      agv: '',
      msTaskPackageId: msPackageId,
      aoBarcode: scanCode.value,
    });

    if (data.retCode === '200') {
      Notification.success({
        title: '成功',
        content: data.message,
        closable: true,
      });
    } else {
      Notification.error({
        title: '失败',
        content: data.message,
        closable: true,
      });
    }
    booleanStore.toggleBool4(9);
  }
  // 工作包扫码
  async function gzbScan() {
    const data = await searchToolMaterial({
      toolCode: toolCode.value,
    });
    if (data.retCode === '200') {
      Notification.success({
        title: '成功',
        content: data.message,
        closable: true,
      });
    } else {
      Notification.error({
        title: '失败',
        content: data.message,
        closable: true,
      });
    }
  }
  // 工作包回库
  async function gzbBackBtn() {}
  // 缓存箱出库
  async function hcxComeBtn() {}
  // 缓存箱扫码
  async function hcxScan() {}
  // 缓存箱回库
  async function hcxBoxBackBtn() {}
  // 分拣保存
  async function saveBtn() {}

  async function scanSubmit() {
    // if (scanCode.value.length === 12) {
    //   const scanCodeList = [...scanCode.value];
    //   if (scanCodeList[0] === 1) {
    //     // 缓存箱扫码
    //     hcxScan();
    //   } else if (scanCodeList[0] === 2) {
    //     // 工作包扫码
    //     gzbScan();
    //   }
    // }
  }
  onMounted(() => {
    nextTick(() => {
      scanInput.value.focus();
    });
    handleSearch();
  });
</script>

<template>
  <a-card :header-style="hStyle" :bordered="false">
    <template #title>
      <div class="font">扫码操作</div>
    </template>

    <a-row :gutter="{ md: 8, lg: 24, xl: 32 }">
      <a-col :span="6">
        <div>
          <a-input
            ref="scanInput"
            v-model="scanCode"
            placeholder="请输入缓存箱/托盘码/条码"
            size="large"
            :disabled="disabled"
            @keyup.enter="scanSubmit()"
          >
            <template #prefix>
              <icon-info-circle size="13" :style="{ fontSize: '20px' }" />
            </template>
          </a-input>
        </div>
      </a-col>
      <a-col :span="6">
        <div class="flex-box"
          ><span>工作包条码：</span>
          <span class="font-size">{{ toolCode }}</span>
        </div>
      </a-col>
      <a-col :span="6">
        <div class="flex-box">
          <span>缓存箱条码：</span>
          <span class="font-size">{{ workBinCode }}</span>
        </div>
      </a-col>

      <a-col class="margin-top" :span="24">
        <a-button type="primary" size="large" @click="gzbComeBtn"
          >工作包出库</a-button
        >
        <a-button type="primary" class="btn-reset" size="large" @click="gzbScan"
          >工作包扫码
        </a-button>
        <a-button
          type="primary"
          class="btn-reset"
          size="large"
          @click="gzbBackBtn"
          >工作包回库</a-button
        >
        <a-button
          type="primary"
          class="btn-reset"
          size="large"
          @click="hcxComeBtn"
          >缓存箱出库</a-button
        >
        <a-button type="primary" class="btn-reset" size="large" @click="hcxScan"
          >缓存箱扫码</a-button
        >
        <a-button
          type="primary"
          class="btn-reset"
          size="large"
          @click="hcxBoxBackBtn"
          >缓存箱回库</a-button
        >
        <a-button type="primary" class="btn-reset" size="large" @click="saveBtn"
          >分拣保存</a-button
        >
      </a-col>
    </a-row>
  </a-card>
</template>

<style scoped>
  .margin-top {
    margin-top: 16px;
  }
  .btn-group {
    float: right;
    margin-top: 15px;
  }

  .btn-reset {
    margin-left: 10px;
  }
  .font {
    font-size: 20px;
    color: black;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
      Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
      sans-serif;
  }
  .div-tips {
    align-items: center;
    text-align: center;
    color: #999;
  }
  .flex-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap;
    margin-top: 6px;
  }
  .font-size {
    font-size: 18px;
    font-weight: bold;
  }
</style>
